<template>
  <div class="cumstom-upload">
    <div class="upload">
      <el-upload
        class="upload-demo"
        :action="action"
        :file-list="fileList"
        :show-file-list="false"
        :multiple="false"
        :auto-upload="true"
        :on-success="uploadSuccess"
        :limit="20"
        :on-error="uploadError"
      >
        <el-tooltip :content="tipText" lacement="Bottom Left" effect="light">
          <el-button size="small" icon="el-icon-upload">上传附件</el-button>
        </el-tooltip>
      </el-upload>
    </div>
    <file-item
      v-for="(tag, index) in fileList"
      :key="index"
      :fileInfo="tag"
      @delete="deleteFile"
      @click="clickFile"
      closable
      class="file-item"
    />
  </div>
</template>

<script>
import FileItem from '@/components/FileItem'
export default {
  components: {
    FileItem,
  },
  props: {
    action: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      tipText:
        '附件最大为50Mb，支持文件格式：.doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf,.jpg,.jpeg,.bmp。',

      fileList: [
        // {
        //   name: '钢筋布置图.jpeg',
        //   type: 'info',
        //   url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/01be07dc-3cd5-4dfd-af30-e83695e7bb42.jpeg',
        // },
        // {
        //   name: '母线加工机样图.jpeg',
        //   type: 'info',
        //   url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/79b21c8f-8be3-48bf-be78-a8ed6856ee0f.jpeg',
        // },
        // {
        //   name: '设备台账.xls',
        //   type: 'info',
        //   url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/0f393d88-18f5-4a92-90f8-6dea4c8b7306.xlsx',
        // },
      ],
    }
  },
  methods: {
    // 删除标签
    deleteFile(fileInfo) {
      const index = this.fileList.findIndex(
        (item) => item.name === fileInfo.name,
      )
      this.fileList.splice(index, 1)
      this.$emit('delete', { fileInfo, fileList: this.fileList })
    },
    //删除
    clickFile(fileInfo) {
      this.$emit('click', fileInfo)
    },
    uploadSuccess(response, file, fileList) {
      this.fileList.push({
        name: '88888.txt',
        type: 'info',
      })
      console.log('res', response)
      console.log('file', file)
      console.log('fileList', fileList)
    },
    uploadError(err, file, fileList) {
      console.log('失败了，', file, fileList)
      this.fileList.push({
        name: file.name,
        type: 'info',
        url: '/',
      })
    },
  },
}
</script>

<style lang="less" scoped>
.cumstom-upload {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .upload {
    width: 100px;
  }
  .file-item {
    margin-top: 5px;
  }
}
</style>
